<template>
  <el-container>
    <el-aside width="200px">
      <el-scrollbar height="600px">
        <h4 style="margin-left: 20px">Basic基础组件</h4>
        <p v-for="(item, key) in jsonData" :key="item" class="scrollbar-demo-item"
          @click="changeColor(item, key, $event)">
          {{ item }}
        </p>
      </el-scrollbar>
    </el-aside>
    <el-main>
      <!-- 组件页面 -->
      <div class="components">
        <component :is="componentName" />
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { ref, onMounted, watch, defineComponent } from "vue";
import moduleJson from "@/assets/Json/module/module.json";
import Buttonvue from '@/pages/module.component/Button.vue'
import Inputvue from '@/pages/module.component/Input.vue'
import Dialogvue from '@/pages/module.component/Dialog.vue'
import Echartsvue from '@/pages/module.component/Echarts.vue'
import Imagevue from '@/pages/module.component/Image.vue'
import Radiovue from '@/pages/module.component/Radio.vue'
import Selectvue from '@/pages/module.component/Select.vue'
import Switchvue from '@/pages/module.component/Switch.vue'
import TimePickervue from '@/pages/module.component/TimePicker.vue'
import TimeSelectvue from '@/pages/module.component/TimeSelect.vue'
export default defineComponent({
  components: {
    Buttonvue,
    Inputvue,
    Dialogvue,
    Echartsvue,
    Imagevue,
    Radiovue,
    Selectvue,
    Switchvue,
    TimePickervue,
    TimeSelectvue,
  },
  mounted() {
    /**设置默认颜色 */
    const paragraph = document.querySelectorAll(".scrollbar-demo-item");
    if (paragraph.length > 0) {
      paragraph[0].style.background = "var(--el-color-primary-light-9)";
      paragraph[0].style.color = "var(--el-color-primary)";
    }
  },
  setup() {
    // 拿到第一个数据
    const jsonData = JSON.parse(JSON.stringify(moduleJson))
    // let componentName =ref("" + Object.keys(jsonData)[0] + "vue");
    let componentName = ref('buttonvue');
    // 左侧标签更改颜色
    const changeColor = (item, key, event) => {
      // console.log(item,key,event)
      componentName.value = '' + key + 'vue';
      console.log(componentName.value)
      const paragraphs = document.querySelectorAll(".scrollbar-demo-item");
      paragraphs.forEach((p) => {
        p.style.background = "#fff";
        p.style.color = "#000";
      });
      event.target.style.background = "var(--el-color-primary-light-9)";
      event.target.style.color = "var(--el-color-primary)";
    };

    return {
      jsonData,
      componentName,
      changeColor,
    };
  },
});





</script>
<style scoped>
.components{
  padding-top: 32px;
  padding-left: 42px;
}
.el-container {
  height: 100%;
}

.el-aside {
  border-right: 1px solid rgb(226, 226, 226);
}

.scrollbar-demo-item {
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin: 20px;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
}

p:hover {
  /* background: var(--el-color-primary-light-9); */
  color: var(--el-color-primary);
}
</style>
